<template>
    <div id="app">
        <Card :stus="stus" />
        <div class="addBtn">
            <el-button size="large" type="primary" @click="openDrawer">新增</el-button>
        </div>
        <el-drawer v-model="drawer" title="I am the title" :with-header="false">
            <AdddPage v-model="form"></AdddPage>
        </el-drawer>
    </div>
</template>
<script setup>
import AdddPage from "./components/Add.vue";
import Card from "./components/Card.vue";
import { ref } from "vue";

const sexList = ref([{ label: '男', value: '女', }, { label: '女', value: '女', }]);
const drawer = ref(false);
const stus = ref([
    { name: '张三', age: 20, sex: '男', score: { yw: 80, sx: 89, yy: 90 } },
    { name: '李四', age: 20, sex: '男', score: { yw: 88, sx: 90, yy: 74 } },
    { name: '王五', age: 20, sex: '男', score: { yw: 60, sx: 77, yy: 87 } },
    // Math.random() 静态方法返回一个大于等于 0 且小于 1 的伪随机浮点数，并在该范围内近似均匀分布，然后你可以缩放到所需的范围。
    // Math.floor() 函数总是返回小于等于一个给定数字的最大整数。
]);
const report = ref({});
const form = ref({ name: '', age: 0, sex: '', score: { yw: 0, sx: 0, yy: 0 } });

function openDrawer() {
    drawer.value = true;
}

function submit() {
    form.value = { name: '', age: 0, sex: '', score: { yw: 0, sx: 0, yy: 0 } };
}

</script>
<style scoped>
.addBtn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 80px;
}

.icon {
    height: 25px;
}
</style>